<template>
  <div class="h-naive-table-box">
    <div class="h-naive-table-top">
      <n-input v-model:value="value" type="text" placeholder="请输入查询字段..." />
      <n-button type="info">
        查询
      </n-button>
    </div>
    <div class="h-naive-table-bottom">
      <n-button type="info" @click="showModal = true">
        新增数据
      </n-button>
      <n-modal v-model:show="showModal" class="custom-card" preset="card" style="width:600px" title="新增数据" size="huge"
        :bordered="false" :segmented="segmented">

        <!-- 有可优化之处 -->
        <!-- template -->

        <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" :size="size">
          <template v-for="(item, index) in props.dataColumns" :key="index">
            <n-form-item :label="item.title">
              <n-input v-model:value="formValue[item.key]" :placeholder="'请输入' + item.title" />
            </n-form-item>
          </template>
        </n-form>
        <!-- 有可优化之处结束 -->

        <template #footer>
          <n-button type="info" @click="saveData">
            添加
          </n-button>
        </template>
      </n-modal>

      <n-data-table size="small" :columns="columns" :data="datas" :pagination="pagination" />
    </div>
  </div>

</template>

<script setup>
import { h, reactive, ref, onMounted } from "vue";
import { NTag, NButton, useMessage } from "naive-ui";
import useAxios from "@/config/js/AxiosConfig"

let axios = useAxios()
let props = defineProps(["dataColumns", "get"]);
const message = useMessage();

let datas = ref()
let columns = ref()
let pagination = ref()

let showModal = ref(false)
let segmented = reactive({
  content: "soft",
  footer: "soft"
})




function createColumns({
  sendMail
}) {

  // let actions = ref({
  //   title: "操作",
  //   key: "actions",
  //   render(row) {
  //     return h(
  //       NButton,
  //       {
  //         size: "small",
  //         onClick: () => sendMail(row)
  //       },
  //       { default: () => "Send Email" }
  //     );
  //   }
  // })

  // props.dataColumns.push(actions.value)
  return props.dataColumns
}


columns.value = createColumns({
  sendMail(rowData) {
    message.info(`send mail to ${rowData.name}`);
  }
})

let formValue = reactive({})

/**
 * 方法区域
 */
onMounted(() => {
  getDatas()
})

function getDatas() {
  axios.get(props.get)
    .then(res => {
      // console.log(res.data);
      datas.value = res.data
      message.info("数据初始化成功！")
    })
    .catch(err => {
      console.error(err);
    })
}



function handleButtonClick() {

}
</script>

<style scoped>
@import url("@/styles/NavCss/TableNav.css");
</style>
